<template>
  <view>
    <el-form
      :inline="true"
      :model="formData"
      class="form-container"
      :class="{ 'actived-more-dropdown': isActivedMoreDropdown }"
      style=""
    >
      <el-form-item
        :label="metaItem.label"
        v-for="(metaItem, metaIdx) in interceptDefaultShowItemMetaList"
        :key="metaItem.key"
        label-position="left"
        :size="computedCompSize"
      >
        <DimensionItemContent
          :meta-item="metaItem"
          :common-attr="commonAttr"
          :form-data="formData"
          :meta-dynmic-config="
            interceptDefaultShowMetaDynmicConfigList[metaIdx]
          "
        ></DimensionItemContent>
      </el-form-item>
      <el-form-item class="toolbar-btn-group-container">
        <el-button-group :size="computedCompSize">
          <el-button
            type="primary"
            :icon="RefreshLeft"
            @click="onReset"
          ></el-button>
          <el-button
            type="primary"
            class="more-dropdown-container"
            @click.prevent.stop="toggleMoreDropdownBtn"
          >
            <el-icon class="el-icon--right">
              <ArrowDown v-if="!isActivedMoreDropdown" />
              <ArrowUp v-else></ArrowUp>
            </el-icon>
            <div class="more-dropdown-content" v-show="isActivedMoreDropdown">
              <el-form
                :inline="false"
                :model="formData"
                class="demo-form-inline"
                label-position="right"
                :size="computedCompSize"
              >
                <el-form-item
                  :label="metaItem.label"
                  v-for="(metaItem, metaIdx) in interceptOtherItemMetaList"
                  :key="metaItem.key"
                >
                  <DimensionItemContent
                    :meta-item="metaItem"
                    :common-attr="commonAttr"
                    :form-data="formData"
                    :meta-dynmic-config="
                      interceptOtherMetaDynmicConfigList[metaIdx]
                    "
                  ></DimensionItemContent>
                </el-form-item>
              </el-form>
            </div>
          </el-button>
          <slot name="searchBtn"></slot>
        </el-button-group>
      </el-form-item>
    </el-form>
  </view>
</template>
<script setup>
import { computed, watch, ref, toRef } from "vue";
import { RefreshLeft, ArrowDown, ArrowUp } from "@element-plus/icons-vue";
import DimensionItemContent from "@gd-accbuild-ui/dimension-ui/dimension-item-content/dimension-item-content.vue";
import useSearchForm from "../../hooks/useSearchForm";
const props = defineProps({
  commonAttr: {
    type: Object,
  },
  formItemMetaList: {
    type: Array,
  },
  formData: {
    type: Object,
  },
  metaDynmicConfigList: {
    type: Array,
  },
});
const { onReset } = useSearchForm(props);
const defaultShowItemNum = computed(() => {
  return props.commonAttr?.defaultShowItemNum ?? 1;
});
const formItemMetaList = toRef(props, "formItemMetaList");
const interceptDefaultShowItemMetaList = computed(() =>
  formItemMetaList.value.slice(0, defaultShowItemNum.value)
);
const interceptDefaultShowMetaDynmicConfigList = computed(() => {
  return props.metaDynmicConfigList.slice(0, defaultShowItemNum.value);
});
const interceptOtherItemMetaList = computed(
  () => props.formItemMetaList.slice(defaultShowItemNum.value) /* .filter(
    (meta, metaIdx) => metaIdx + 1 > defaultShowItemNum.value
  ) */
);
const interceptOtherMetaDynmicConfigList = computed(() => {
  return props.metaDynmicConfigList.slice(defaultShowItemNum.value);
});
const isActivedMoreDropdown = ref(false);
const toggleMoreDropdownBtn = () => {
  if (interceptDefaultShowItemMetaList.value.length === 0) return;
  isActivedMoreDropdown.value = !isActivedMoreDropdown.value;
};
const computedCompSize = computed(() => {
  return props.commonAttr?.size ?? "default";
});
</script>
<style lang="scss" scoped>
.form-container {
  position: relative;
  display: flex;
  justify-content: flex-end;
  float: right;
}

.form-container.actived-more-dropdown {
  background-color: #eee;
  //width:200px;
  padding: 7px 0px 7px 0px;
}

.form-container :deep(.el-form-item) {
  margin: auto;
  margin-left: 20px;
}

.toolbar-btn-group-container {
  padding: 5px 0 5px 0;
  margin-left: 2px !important;

  :deep(.el-form-item__content button.el-button) {
    margin-left: 0;
    padding: 0px;
  }
}

.more-dropdown-container {
  position: relative;
  display: inline-block;
  margin-left: 0;
}

.more-dropdown-content {
  position: absolute;
  top: 43px;
  right: -46px;
  background-color: #eee;
  width: 407px;
  height: 500px;
  //box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 12px 0px;
  z-index: 100;
}
</style>
